
<script setup>
import {ref ,onMounted} from 'vue';
import {useRouter} from "vue-router";
const user=ref({})

//点击跳转到活动详情
const router=useRouter();
const act =()=>{
  router.push("/activity")
}
//跳转信息认证
const mes = () => {
  router.push("/message")
}
//跳转我的收藏
const coll = () => {
  router.push("/collect")
}
//跳转我的发布
const fb = () => {
  router.push("/posting")
}
//跳转优惠券
const yhq = () => {
  router.push("/coupon")
}
//跳转中介举报
const jb = () => {
  router.push("/reportUser")
}
//跳转关于我们
const wm = () => {
  router.push("/about")
}
//跳转设置
const sz = () => {
  router.push("/settings")
}
const storeUser=useStore();
const detail = () =>{
    router.push("/userDetail")
}

import {get, post} from '../../util/request.js'
import {useStore} from "../../pinia/index.js";
const djj = ()=>{
  get("my/select",{o:9}).then(r=>{
    console.log(999)
    alert("9999")

  })


}

const show = ref(false);
const actions = [
    { name: '客服热线：8008208820' },
    { name: '拨打' },
    { name: '取消' },
];
const onSelect = (item) => {
    // 默认情况下点击选项时不会自动收起
    // 可以通过 close-on-click-action 属性开启自动收起
    show.value = false;
    showToast(item.name);
};
</script>

<template>
<!--  头像-->
 <div class="van-card" @click="detail">
   <div class="img">
     <van-image
         round
         width="5rem"
         height="5rem"
         position="bottom"
         :src="storeUser.user.avatar"
     />
   </div>
   <div class="name">
     <h3>{{storeUser.user.nickname}}</h3>
     <p>{{storeUser.user.phone}}</p>
   </div>

 </div>

<!--活动-->
  <div class="activity" @click="act">
   <div>
     <h5>暑假活动</h5>
   </div>
  </div>

<!--信息认证 收藏 发布-->
  <div class="three">
    <van-row gutter="20">
      <van-col span="8">
        <div class="icon-with-text" @click="mes">
          <van-icon name="manager-o" size="40" dot/>
          <p>信息认证</p>
        </div>
      </van-col>
      <van-col span="8">
        <div class="icon-with-text" @click="coll">
          <van-icon name="star-o" size="40" dot/>
          <p>我的收藏</p>
        </div>
      </van-col>
      <van-col span="8">
        <div class="icon-with-text" @click="fb">
          <van-icon name="guide-o" size="40" dot/>
          <p>我的发布</p>
        </div>
      </van-col>
    </van-row>

  </div>

<!--优惠权 中介 关于 专属客服 设置-->
  <div class="four">
    <van-cell title="优惠券" is-link class="custom-cell" size="large" @click="yhq"/>
    <van-cell title="中介举报" is-link class="custom-cell" size="large" @click="jb"/>
    <van-cell title="关于我们" is-link class="custom-cell" size="large" @click="wm"/>
      <van-cell is-link title="专属客服" @click="show = true" class="custom-cell" size="large"/>
      <van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />
    <van-cell title="设置" is-link class="custom-cell" size="large" @click="sz"/>
    <van-cell title="设置f" is-link class="custom-cell" size="large" @click="djj"/>
  </div>



</template>


<style scoped>
/*头像 名字*/
.van-card{
  position: absolute;
  top: 0;
  left: 10px;
  right: 10px;
  height: 105px;
  padding: 5px;
  margin-top: 40px;
  z-index: 1000;
  overflow: hidden;
}
h3{
  text-align: left
}
p{
  text-align: left
}
.img{
  height: 97px;
  width: 100px;
  margin-top: 0;
  padding-top: 10px;
  position: absolute;
}
.name{
  height: 94px;
  width: 200px;
  margin-left: 105px;
  margin-top: 25px;
}
/*活动*/
.activity{
  position: absolute;
  top: 152px;
  left: 10px;
  right: 10px;
  background-color: white;
  width: auto;
  height: 70px;
  border-radius: 0.5rem;
  padding-top: 0;
  overflow: hidden;
}

.activity div {
  margin-top: 40px;
  margin-left: 15px;
  text-align: left;
}

.three{
  position: absolute;
  top: 230px;
  left: 10px;
  right: 10px;
  width: auto;
  height: 100px;
  background-color: white;
}
.icon-with-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 10px;
}

.icon-with-text p {
  margin-top: 5px;
  font-size: 14px;
}


.four{
  position: absolute;
  top: 313px;
  left: 10px;
  right: 10px;
  width: auto;
  height: 600px;
  padding-top: 10px;
}
.custom-cell {
  height: 51px;
  margin-bottom: 1px;
  text-align: left !important;
}
</style>
